import React from 'react';

import {connect} from 'dva'
import moment from 'moment'

import Title from 'components/Title'
import Chart from 'components/Chart'

@connect(({gis}) => ({...gis}))
class Equipment extends React.Component {
    static defaultProps = {
        Conf: {
            key: 'gwsb',
            label: '管网设备统计',
            chart: {
                type: 'BarHorizontal',
                columns: {
                    seriesItems: [{name: '', field: 'count', type: 'bar'}],
                    xAxis: { field: 'name' },
                }
            },
            server: {
                serverType: ['gis/queryIdentify', 'gis/queryMetas'],
                payload: {
                    layers: "all",
                    mapExtent: { "type":"extent","xmin":548058,"ymin":4220360,"xmax":558938,"ymax":4225262,"spatialReference":{"wkid":4547,"latestWkid":4547},"_shifted":null,"_parts":null },
                    returnCountOnly: true
                }
            },
        }
    }

    constructor(props) {
        super(props);
    
        this.state = {
          dataSource: []
        }
      }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateECharts()
  }

  formatData = async () => {
    const { MetasResource, IdentifyResource } = this.props;

    if(Array.isArray(MetasResource) && Array.isArray(IdentifyResource) && MetasResource.length>0 && IdentifyResource.length>0){
        // 获取元信息，type=4 为自来水管网
        const gisData = MetasResource.find(ele => {
            if(ele.type === 4){
                return ele
            }
        })
        // 处理成[{name: '名称', count: '值'}]
        let dataSource = []
        if(gisData && gisData.net){
            const { net } = gisData;
            net.map(element => {
                const { dname, layerid } = element;
                const iData = IdentifyResource.find(ele => {
                    if(ele['layerId'] === layerid){
                        return ele
                    }
                })
                dataSource.push({ name: dname, count: iData['count'] })
            })
            // 更新state
            this.setState({
                dataSource
            })
        }
    }
  }

  // 人工维护数据：指标逻辑
  queryECharts = async (type, payload) => {
    await this.props.dispatch({
      type,
      payload
    }).then(() => {
        this.formatData()
    })
  }

  // 图表
  setDateECharts = () => {
    const { server } = this.props.Conf;
    const { serverType, payload } = server;
    serverType.map(ele => {
      this.queryECharts(ele, payload);
    })
  }

  render() {
    const { props, state } = this;
    const { Conf } = props;
    const { dataSource } = state;

    const { key, label, chart } = Conf;
    const { type: chartType, columns, color, other } = chart;
    return (
      <div>
        <Title key={key} title={label}>
            <Chart
                type={chartType}
                color={color}
                columns={columns}
                dataSource={dataSource}
                other = {other}
                style = {{ paddingBottom: '20px'}}
          />
        </Title>
      </div>
    )
  }
}

export default Equipment;
